<script setup>
import { defineProps, inject } from 'vue'
defineProps({
  to: {
    type: String,
    default: ''
  }
})
const separator = inject('separator')
</script>
<template>
    <div class="xtx-bread-item">
      <!--
        如果to存在 有值 我们就渲染一个router-link标签
        如果to不存在  那就渲染一个span标签
      -->
      <router-link v-if="to" :to="to"><slot /></router-link>
      <span v-else><slot /></span>

      <!-- 分隔符 -->
       <!-- <i v-if="separator">{{ separator }}</i> -->
      <!-- <i v-else class="iconfont icon-angle-right"></i>  -->
      <!-- <span><slot>首页</slot></span> -->
      <i>{{ separator }}</i>
    </div>
  </template>

  <style lang="less" scoped>
  .xtx-bread-item {
    i {
      margin: 0 6px;
      font-size: 10px;
    }
    // 最后一个i隐藏
    &:nth-last-of-type(1) {
      i {
        display: none;
      }
    }
  }
  </style>
